<!--
 * @Author: YMJ-chenjiao
 * @Date: 2020-10-30 10:27:42
 * @Description: 会员统计
-->
<template>
  <div class="dashboard-container">
    <div class="container">
      <!-- 实时数据 -->
      <div class="model">
        <div class="text">数据总览</div>
        <el-row :gutter="24" class="data">
          <el-col
            v-for="item in realTimeData"
            :key="item.label"
            :span="6"
          >
            <el-card shadow="hover">
              <el-row :gutter="20">
                <el-col :span="10"><i :class="item.icon" class="icon" /></el-col>
                <el-col :span="10"><span>{{ item.value }}<p>{{ totalData[item.label] }}</p></span></el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div class="model2">
        <div class="text">会员分析</div>
        <el-row style="height: 280px">
          <el-col v-for="(item, index) in memberCanvs" :key="index" class="h100" :span="6">
            <div :ref="item.name" class="h100" />
            <div class="pos" v-html="item.title" />
          </el-col>
        </el-row>
      </div>
      <div class="model2">
        <div class="text">组织分析</div>
        <el-row style="height: 280px">
          <el-col v-for="(item, index) in organizeCanvs" :key="index" class="h100" :span="8">
            <div :ref="item.name" class="h100" />
            <div class="pos" v-html="item.title" />
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
// 数据封装
import useConfig from './config/total.config'

export default {
  data() {
    return {
      ...useConfig(),
      totalData: {},
      memberTotal: 0
    }
  },
  async mounted() {
    await this.getTotalData(this.total1)
    await this.getTotalData(this.total2)
  },
  methods: {
    async getTotalData(_total) {
      for (let i = 0; i < _total.length; i++) {
        const item = _total[i]
        const [res] = await this.$async(item.api)
        if (res) {
          if (item.idRender) {
            const _list = item.transform(res.data)
            _list.forEach(item2 => this.renderCanvas(item2.key, item2.option, item2.isLine))
          } else {
            this.totalData = { ...this.totalData, [item.key]: res.data }
          }
        }
      }
    },
    getData() {
      // Promise.all()
    },
    renderCanvas(name, option) {
      const myChart = echarts.init(this.$refs[name][0])
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.h100{
    height: 100%;
    position: relative;
}
.pos{
    position: absolute;
    z-index: 9;
    left: 50%;
    top: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    color: #828282;
    font-size: 14px;
}
.dashboard-container{
    background-color: #FFFFFF;
}
.container{
    margin: 0 auto;
    padding: 15px 0 40px;
    width: 95%;
    background-color: #FFFFFF;
}
.model{
    height:250px;
    margin-bottom: 40px;
    border:1px solid rgba(233, 233, 233, 1);
}
.model2{
    box-sizing: border-box;
    height:330px;
    margin-bottom: 40px;
    border:1px solid rgba(233, 233, 233, 1);
}
.model2:last-child{
    margin-bottom: 0;
}
.text{
    height: 50px;
    background-color: rgba(242, 242, 242, 1);
    border-bottom:1px solid rgba(233, 233, 233, 1) ;
    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
    font-weight:700;
    line-height:20px;
    font-size:14px;
    text-align: left;
    padding: 15px 15px;
}
.data{
   padding:40px 20px;
}
.icon{
    display: inline-block;
    font-size:60px;
    color:rgb(2, 167, 240);
}
.aff-border{
    width:70%;
    height:40px;
    display: flex;
    padding: 15px 30px 0 30px;
    cursor: pointer;
    border-bottom:1px solid rgba(233, 233, 233, 1);
    justify-content: space-between;
}
.aff-border span{
    font-size:13px;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
}
.link{
    display: flex;
    font-size:16px;
    font-weight: 400;
}
.link-item{
    flex: 1;
}
.link-item p{
    font-size:14px;
    font-weight: 400;
    font-family: 微软雅黑, sans-serif;
    font-style: normal;
    color: rgb(153, 153, 153);
    text-align: center;
}
.center{
    text-align: center;
    font-size:16px;
    font-family:微软雅黑, sans-serif;
    font-weight: 400;
    border: 1px solid rgba(233, 233, 233, 1);
    font-style: normal;
    color: #999999;
    padding-top: 20px;
    padding-bottom: 60px;
}
.center p{
    color:#D9001B;
}

</style>
